<template>
  <div>
    <button v-for="button in topButtons" :key="button.text" @click="button.action">
      {{ button.text }}
    </button>
    <table>
      <thead>
      <tr>
        <th v-for="header in headers" :key="header.key">
          {{ header.text }}
        </th>
        <th v-if="hasOperationColumn">操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="row in rows" :key="row.id">
        <td v-for="header in headers" :key="header.key">
          {{ row[header.key] }}
        </td>
        <td v-if="hasOperationColumn">
          <button v-for="button in operationButtons" :key="button.text" @click="() => button.action(row)">
            {{ button.text }}
          </button>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const props = defineProps({
  headers: Array,
  rows: Array,
  topButtons: Array,
  operationButtons: Array,
});

const hasOperationColumn = computed(() => props.operationButtons && props.operationButtons.length > 0);
</script>

<style>
/* 在这里添加样式 */
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
</style>
